<template>
	
	<view class="selectContainer">
		<!-- 引入头部 -->
		<Header :num="num"></Header>
		<!-- 选择城市 -->
		<view class="citySelect">
			<span class="city">
				<text :class="{up:upOrDown===1}">北京</text>
				<u-icon name="arrow-up" color="#562fe2" v-if="upOrDown===1" @click="select(1)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else  @click="select(1)"></u-icon>
				
			</span>
			<span class="city">
				<text :class="{up:upOrDown===2}">全国</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===2" @click="select(2)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(2)"></u-icon>
				
			</span>
			<span class="city">
				<text :class="{up:upOrDown===3}">按距离由近到远</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===3" @click="select(3)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(3)"></u-icon>
				
			</span>
		</view>
		<!-- 选择地点 -->
		<view class="placeSelect citySelect">
			<span class="place city">
				<text :class="{up:upOrDown===4}">装货地</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===4" @click="select(4)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(4)"></u-icon>
			</span>
			<span class="place city">
				<text :class="{up:upOrDown===5}">卸货地</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===5" @click="select(5)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(5)"></u-icon>
			</span>
			<span class="place city">
				<text :class="{up:upOrDown===6}">货主</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===6" @click="select(6)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(6)"></u-icon>
			</span>
			<span class="place city">
				<text :class="{up:upOrDown===7}">车型</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===7" @click="select(7)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(7)"></u-icon>
			</span>
		</view>
		
		<!-- 选择城市时弹出的选择框 -->
		<view class="move" :style="{transform: moveTransform,transition: moveTransition}">
			<!-- 选择城市 -->
			<view class="Allcity" v-if="upOrDown===1||upOrDown===2">
				<view class="history">
					<text>历史选择</text>
					<view class="historySelect">
						<span>东城</span>
						<span>东城</span>
						<span>东城</span>
						<span>东城</span>
						<span>东城</span>
					</view>
				</view>
				<view class="place">
					<view class="title">
						<text v-if="upOrDown===1">选择发货地</text>
						<text v-else>选择到达地</text>
						<text>返回上一级</text>
					</view>
					<view class="selectPlace"></view>
					<span class="selected">全市</span>
					<span>全市</span>
					<span>全市</span>
					<span>全市</span>
					<span>全市</span>
					<span>全市</span>
					<span>全市</span>
					<span>全市</span>
				</view>
			</view>
			<!-- 选择距离 -->
			<view class="distance" v-if="upOrDown===3">
				<div class="distanceSelected">按装货距离由近到远排序</div>
				<div>按运费由高到低排序</div>
			</view>
			<!-- 装货地-->
			<view class="fromOrTo" v-if="upOrDown===4">
				<div class="selectButton">
					<button class="uButton">重置</button>
					<button type="primary" class="uButton" color="#532fe6">确定</button>
				</div>
			</view>
			<!-- 卸货地 -->
			<view class="fromOrTo" v-if="upOrDown===5">
				<div class="selectButton">
					<button class="uButton">重置</button>
					<button type="primary" class="uButton" color="#532fe6">确定</button>
				</div>
			</view>
			<!-- 货主 -->
			<view class="owner fromOrTo" v-if="upOrDown===6">
				<div class="selectButton">
					<button class="uButton">重置</button>
					<button type="primary" class="uButton" color="#532fe6">确定</button>
				</div>
				
			</view>
			<!-- 车型 -->
			<view class="carType fromOrTo" v-if="upOrDown===7">
				<div class="car">
					<text class="carSelect">自卸</text>
					<text class="carSelect">不限车型</text>
				</div>
				<div class="selectButton">
					<button class="uButton">重置</button>
					<button type="primary" class="uButton">确定</button>
				</div>
			</view>
		</view>
		<!-- <view class="Allcity">
			<view class="history">
				<text>历史选择</text>
				<view class="historySelect">
					<span>东城</span>
					<span>东城</span>
					<span>东城</span>
					<span>东城</span>
					<span>东城</span>
				</view>
			</view>
			<view class="place">
				<view class="title">
					<text v-if="sendOrArrive===1">选择发货地</text>
					<text v-else>选择到达地</text>
					<text>返回上一级</text>
				</view>
				<view class="selectPlace"></view>
				<span class="selected">全市</span>
				<span>全市</span>
				<span>全市</span>
				<span>全市</span>
				<span>全市</span>
				<span>全市</span>
				<span>全市</span>
				<span>全市</span>
			</view>
		</view> -->
		
		<!-- 当选择的每没有内容时 -->
		<view class="null" v-if="null">
			<image src="../../static/images/null.jpg" />
			<div class="desc">
				<text>暂时没有更多货源了</text>
				<text>等会再来看看吧</text>
			</div>
			<u-button class="refresh"  shape="circle">刷新货源</u-button>
		</view>
		
		
	
	
	</view>
</template>

<script>
	import Header from '../components/Header/Header'
	export default {
		data() {
			return {
				upOrDown:0,//箭头头上下
				sendOrArrive:1,//发货地或送达地
				Allselected:5,//控制弹出框不同的显示内容  1-北京/全国  2-距离  3-装货地/卸货地  4-货主 5-车型
				moveTransform:"translateY(-450px)",
				moveTransition:"",
				null:false,//没有资源时
				num:''
			}
		},
		components:{
			Header
		},
		methods: {
			select(num){
				if(this.upOrDown === num){
					console.log(111)
					this.moveTransform = "translateY(-450px);"
					this.moveTransition =  "all 0.3s linear;"
					console.log(this.moveTransition)
					this.upOrDown = 0
				}else{
					this.moveTransform = num >=3 ? this.moveTransform = "translateY(-5px);":this.moveTransform = "translateY(-40px);"
					this.moveTransition =  "all 0.3s linear;"
					this.upOrDown = num
				}
			},
			onLoad(num){
				// 接受header传过来的控制高亮的参数
				this.num = num.selected
			}

		}
	}
</script>

<style lang="scss">
// 城市和地点
.citySelect{
	display: flex;
	justify-content: space-between;
	margin: 15px 10px 15px 10px;
	.city{
		font-size: 14px;
		text{
			margin-right: 5px;
		}
		// 城市或地点被选中的样式
		.up{
			color: #562fe2;
		}
	}
}
// 选择城市时弹出的选择框
.move{
	background: #FFFFFF;
	.Allcity{
		height: 350px;
		background: #fff;
		padding: 15px 10px 0 10px;
		text{
			display: block;
			font-size: 18px;
			color: #b4b3b8;
			font-weight: 400;
			margin: 10px 0;
		}
		span{
			display: inline-block;
			border: 1px solid #b4b3b8;
			width: 90px;
			height: 38px;
			text-align: center;
			line-height: 38px;
			font-size: 14px;
			margin-right: 5px;
			margin-bottom: 5px;
		}
		// 选择发货地
		.place{
			.title{
				display: flex;
				justify-content: space-between;
				>text:nth-child(2){
					color: blue;
				}
			}
		}
		.selected{
			border-color: blue;
			background-color: #f2effd;
		}
	}
}

// 选择地点
.placeSelect{
	height: 350px;
	background: #fff;
	height: 25px;
	line-height: 25px;
	background-color: #f2f2f4;
}
// 选择距离
.distance{
	height: 350px;
	background: #fff;
	div{
		border-bottom: 1px solid #dedee2;
		font-size: 14px;
		padding: 15px 0;
	}
	.distanceSelected{
		color: blue;
		
	}
}
// 装货地卸货地
.fromOrTo{
	height: 350px;
	background: #fff;
	// display: flex;
	// justify-content: space-between;
	// height: 100%;
	// 弹框中的按钮
	.selectButton{
		padding: 200px 10px 0 5px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		.uButton{
				// margin-top: 400px;
				width: 200px;
				margin-right: 10px;
			}
			.uButton+.uButton{
					background-color:#532fe6;
				}
	}
}
// 车型
.carType{
	height: 350px;
	background: #fff;
	.car{
		padding: 20px;
		.carSelect{
			display: inline-block;
			background: #f7f7fa;
			width: 100px;
			height: 35px;
			text-align: center;
			line-height: 35px;
			font-size: 10px;
			border-radius: 4px;
			margin-right: 15px;
			
		}
	}
}
// 没有货源
.null{
	height: 100%;
	width: 100%;
	image{
		display: block;
		width: 100px;
		height: 150px;
		text-align: center;
		margin: 50px  auto;
		margin-bottom: 0;
	}
	.desc{
		margin: 25 auto;
		margin-left: 125px;
		margin-bottom: 25px;
		margin-top: 25px;
		text{
			display: block;
			font-size: 14px;
			color: #b4b3b8;
		}
		>text:nth-child(2){
			margin-left: 15px;
		}
	}
	.refresh{
		width:150px ;
		height: 45px;
		// border-radius: 10%;
		border-color: blue;
		color:blue ;
	}
	
}

</style>
